<template>
    <div>
        <div class="left-box">

            <img src="@/static/image/spirit1.png" class="left-box-img" />
            <img src="@/static/image/2.jpg" class="left-box-img-2" />


            <div class="left-box-bottom" :style="leftBoxBottomStyle">
                <div class="left-box-bottom-top">
                    <div v-if="store.languageCode == 'zh-CN' || store.languageCode == 'zh-SG'">唐伯虎-《临终诗》</div>
                    <div v-else-if="store.languageCode == 'zh-HK' || store.languageCode == 'zh-MO' || store.languageCode == 'zh-TW'">
                        唐伯虎-《臨終詩》</div>
                    <div v-else>Epicurus</div>
                </div>
                <div class="left-box-bottom-center" :style="leftBoxBottomCenterStyle">
                    <el-scrollbar width="100%" :always="alwaysOfScroll">

                        <div v-if="store.languageCode == 'zh-CN' || store.languageCode == 'zh-SG'">
                            <div>生在阳间有散场，死归地府又何妨。</div>
                            <div>阳间地府俱相似，只当漂泊在异乡。</div>
                        </div>
                        <div v-else-if="store.languageCode == 'zh-HK' || store.languageCode == 'zh-MO' || store.languageCode == 'zh-TW'">
                            <div>生在陽間有散場，死歸地府又何妨。</div>
                            <div>陽間地府俱相似，只當漂泊在異鄉。</div>
                        </div>
                        <div v-else>
                            Death is not worth fear, because we do not feel the pain of death when we are alive, and after
                            we die, we will no longer feel any pain.
                        </div>
                    </el-scrollbar>
                </div>
                <div class="left-box-bottom-bottom">
                    {{ store.appFront.obituary }}
                    <span class="left-box-bottom-bottom-span">{{ store.appFront.managementSystem }}</span>
                </div>
            </div>
        </div>

        <div class="right-box">
            <LoginForm />
            <SwitchLanguage class="switch-language-component" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { useStore } from '@/stores/counter';
import LoginForm from './components/LoginForm.vue';
import SwitchLanguage from '@/components/SwitchLanguage.vue';
import { ref } from 'vue';

let store = useStore();
let leftBoxBottomCenterStyle = ref("");

let leftBoxBottomStyle = ref("");


let alwaysOfScroll = ref(true);

let resize=()=>{
    if(window.innerWidth < 1150&&window.innerWidth>1004){
        leftBoxBottomStyle.value = "padding: 50px 100px 50px 20px;";
        leftBoxBottomCenterStyle.value = "font-size: 40px;";
    }
    else if(window.innerWidth<1004){
        leftBoxBottomStyle.value="height:100vh;opacity:0.8;color:rgba(0,0,0,0)";
        alwaysOfScroll.value=false;
    }
    else{
        leftBoxBottomStyle.value = "";
        leftBoxBottomCenterStyle.value = "";
    }
}


resize();

// 监听窗口大小变化
window.addEventListener("resize", function (){
    resize();
});


</script>

<style lang="scss" scoped>
.left-box {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 60%;
    height: 100vh;
    opacity: 1;
    background: rgba(43, 223, 157, 1);

    // 禁止复制
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;


    .left-box-img,
    .left-box-img-2 {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .left-box-img-2 {
        z-index: 0;
        opacity: 0.3;
    }

    .left-box-bottom {
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 300rpx;
        color: #fff;
        background: rgba(2, 2, 2, 1);
        padding: 50px;
        box-sizing: border-box;

        .left-box-bottom-top {
            font-size: 24px;
            margin-bottom: 10px;
        }

        .left-box-bottom-center {
            font-size: 48px;
            font-weight: bold;
            // 不换行
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .left-box-bottom-bottom {
            font-size: 24px;
            margin-top: 10px;
            text-align: right;
            .left-box-bottom-bottom-span {
            font-size: 16px;
            margin-left: 2px;
        }

        }
    }
}

.right-box {
    position: fixed;
    right: 0px;
    top: 0px;
    width: 40%;
    min-width: 500px;
    height: 100vh;
    background: rgba(243, 243, 243, 1);
    z-index: 100;

    .switch-language-component {
        position: absolute;
        bottom: 20px;
        right: 20px;
        line-height: 40px;
    }

}
</style>